import { FileTextOutlined, SettingOutlined } from "@ant-design/icons";
import { Tabs } from "antd";
import { FC, useEffect, useState } from "react";
import ComponentProp from "./components/ComponentProp";
import PageSetting from "./components/PageSetting";
import useGetComponentInfo from "../../../../../hooks/useGetComponentInfo";
// TS 枚举
enum TAB_KEYS {
  PROP_KEY = "prop",
  SETTING_KEY = "setting",
}
const RightPanel: FC = () => {
  const [activeKey, setActiveKey] = useState(TAB_KEYS.PROP_KEY);
  const { selectedId } = useGetComponentInfo();

  useEffect(() => {
    if (selectedId) setActiveKey(TAB_KEYS.PROP_KEY);
    else setActiveKey(TAB_KEYS.SETTING_KEY);
  }, [selectedId]);

  const tabsItems = [
    {
      key: TAB_KEYS.PROP_KEY,
      label: (
        <span>
          <FileTextOutlined className="pr-2" />
          属性
        </span>
      ),
      children: (
        <div className=" h-163 overflow-y-auto">
          <ComponentProp />
        </div>
      ),
    },
    {
      key: TAB_KEYS.SETTING_KEY,
      label: (
        <span>
          <SettingOutlined className="pr-2" />
          页面设置
        </span>
      ),
      children: (
        <div className=" h-163 overflow-y-auto">
          <PageSetting />
        </div>
      ),
    },
  ];
  return <Tabs activeKey={activeKey} items={tabsItems}></Tabs>;
};

export default RightPanel;
